<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-组件管理</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo"></div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        // 1.0 创建组件 - 子组件
        const School = Vue.extend({
            // 只会影响vue开发工具中组件的名称
            name: 'School',
            // 子类的数据
            data() {
                return {
                    str: '尚硅谷',
                    num: 0
                }
            },
            template: `
                <div>
                    <p>{{ str }} {{ num }}</p>
                    <button @click="num++">点击更改</button>
                </div>
            `
        })

        const Student = Vue.extend({
            // 只会影响vue开发工具中组件的名称
            name: 'Student',
            // 子类的数据
            data() {
                return {
                    str: 'Student子组件',
                    num: 0
                }
            },
            methods: {
                fn() {
                    this.num++
                }
            },
            template: `
                <div>
                    <p>{{ str }} {{ num }}</p>
                    <button @click="fn">点击更改</button>
                </div>
            `
        })

        // 会创建一个专门的根组件，管理其他组件
        const App = Vue.extend({
            components: {
                School,
                Student
            },
            // 3.0 在父组件中使用
            template: `
                <div>
                    <School />
                    <hr />
                    <Student />
                </div>
            `
        })
        
        // 核心vm实例
        const vm = new Vue({
            // el: '#demo',
            // 2.0 挂载到根组件上
            components: {
                App
            },
            template: '<App />'
        })

        vm.$mount('#demo') 
    </script>
</body>
</html>